<template>
	<view class="container">
		<view>验证码已发送到尾号为{{props.phone.slice(7,11)}}的手机上：</view>
		<uni-forms ref="form" :rules="rules" labelAlign="right" :labelWidth="80" :modelValue="formData">
			<uni-forms-item label="验证码" :required="true" name="code">
				<uni-easyinput type="number" :clearable="true" placeholder="请输入6位验证码" v-model="formData.code">
				</uni-easyinput>
			</uni-forms-item>
		</uni-forms>
	</view>
</template>

<script setup>
	import {
		defineProps,
		ref
	} from "vue";
	import {
		ResetPassword
	} from "@/apis/user.js"

	const props = defineProps({
		phone: String
	});
	defineExpose({
		handleReset
	})

	const formData = ref({
		code: ""
	});
	const rules = {
		code: {
			rules: [{
				required: true,
				errorMessage: "请输入验证码"
			}, {
				minLength: 6,
				maxLength: 6,
				errorMessage: "验证码应为6位"
			}]
		}
	}
	const form = ref();

	function handleReset() {
		return new Promise((resolve, reject) => {
			form.value.validate().then(res => {
				ResetPassword({
					...formData.value,
					mobilePhone: props.phone
				}).then(res => {
					resolve(res);
				}).catch(err => {
					reject(err);
				})
			}).catch(err => {
				reject(err);
			})
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 20rpx;
	}
</style>
